<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>快速入门</title>
<!-- <script type="text/javascript" src="../js/vuejs-2.5.16.js"> 
	
</script>-->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- <script type="text/javascript">
	import vue from 'vue';
</script> -->



</head>

<body>
	<div id="app">{{message}} {{true?"OK":"No"}}</div>
	<a href=${pageContext.request.contextPath}/AjaxServlet>/AjaxServlet</a>
	<button id="btn">btn</button>
	<button id="btn2">btn2</button>
	
	<div id="app2">
		<input type="text" placeholder="内容跟随变化" v-model="message2" /> <br>
		<button>{{message2}}</button>
	</div>
	


	<script type="text/javascript">
		$("#btn").click(function() {
			$(this).html("ok2");
		});
		new Vue({
			el : '#app',
			data : {
				message : 'hello world'
			}
		});

		const app2 = new Vue({
			el : "#app2",
			data : {
				message2 : "11"
			}
		});

		$("#btn2").click(function() {
			$.ajax({
				url : "${pageContext.request.contextPath}/AjaxServlet",
				type : "post",
				data : {
					"name" : "小明"
				},
				dataType : "json",
				success : function(data) {
					/* alert("成功"); */
					$("#btn2").html(data.name);
				},
				error : function() {
					alert("失败");
				}
			});
		});
	</script>
</body>
</html>